import { Component, OnInit, inject } from '@angular/core';
import { NzMessageService } from 'ng-zorro-antd/message';
import { NzUploadFile, NzUploadChangeParam } from 'ng-zorro-antd/upload';
import { FileService } from '../../services/file.service';
import { BlogFile } from '../../models/blog.model';

@Component({
  selector: 'app-manage-blogfile',
  standalone: false,
  templateUrl: './manage-blogfile.component.html',
  styleUrl: './manage-blogfile.component.less'
})
export class ManageBlogfileComponent implements OnInit {
  // 依赖注入
  private fileService = inject(FileService);
  private message = inject(NzMessageService);

  // 数据属性
  files: BlogFile[] = [];
  loading = false;
  uploading = false;
  
  // 上传相关
  fileList: NzUploadFile[] = [];
  
  // 预览相关
  previewVisible = false;
  previewImage = '';
  previewTitle = '';

  ngOnInit(): void {
    // 注意：文件管理目前没有获取文件列表的API
    // 这里只是展示上传功能
    this.loadFiles();
  }

  /**
   * 模拟加载文件列表（API中没有获取文件列表的接口）
   */
  loadFiles(): void {
    this.loading = true;
    // 由于API中没有获取文件列表的接口，这里只能展示空列表
    // 实际项目中需要后端提供文件列表接口
    setTimeout(() => {
      this.files = [];
      this.loading = false;
    }, 500);
  }

  /**
   * 上传前的校验
   */
  beforeUpload = (file: NzUploadFile): boolean => {
    // 检查文件类型
    const isImage = file.type?.indexOf('image/') === 0;
    if (!isImage) {
      this.message.error('只能上传图片文件!');
      return false;
    }

    // 检查文件大小 (5MB)
    const isLt5M = file.size! / 1024 / 1024 < 5;
    if (!isLt5M) {
      this.message.error('图片大小不能超过 5MB!');
      return false;
    }

    return true;
  };

  /**
   * 自定义上传
   */
  customUploadReq = (item: any): any => {
    const formData = new FormData();
    formData.append('image', item.file as any);

    this.uploading = true;
    
    return this.fileService.uploadFile(item.file).subscribe({
      next: (response) => {
        if (response.status && response.data) {
          this.message.success('文件上传成功');
          item.onSuccess!(response, item.file);
          
          // 添加到文件列表
          const newFile: BlogFile = {
            _id: response.data._id,
            key: response.data.key,
            size: 0,
            mimetype: '',
            createdBy: '',
            createdAt: new Date().toISOString(),
            updatedAt: new Date().toISOString()
          };
          this.files.unshift(newFile);
          
          // 获取文件签名URL用于预览
          this.getFileUrl(newFile);
        } else {
          this.message.error('文件上传失败');
          item.onError!('上传失败', item.file);
        }
        this.uploading = false;
      },
      error: (error) => {
        console.error('文件上传失败:', error);
        this.message.error('文件上传失败');
        item.onError!(error, item.file);
        this.uploading = false;
      }
    });
  };

  /**
   * 上传状态变化
   */
  handleUploadChange(info: NzUploadChangeParam): void {
    let fileList = [...info.fileList];

    // 只保留最近的上传
    fileList = fileList.slice(-1);

    // 处理成功上传的文件
    fileList = fileList.map(file => {
      if (file.response && file.response.status && file.response.data) {
        file.url = file.response.data.url;
      }
      return file;
    });

    this.fileList = fileList;
  }

  /**
   * 获取文件签名URL
   */
  getFileUrl(file: BlogFile): void {
    this.fileService.getSignedUrl(file.key).subscribe({
      next: (response) => {
        if (response.status && response.data) {
          (file as any).url = response.data.url;
        }
      },
      error: (error) => {
        console.error('获取文件URL失败:', error);
      }
    });
  }

  /**
   * 删除文件
   */
  deleteFile(file: BlogFile): void {
    this.fileService.deleteFile(file.key).subscribe({
      next: (response) => {
        if (response.status) {
          this.message.success('文件删除成功');
          this.files = this.files.filter(f => f._id !== file._id);
        }
      },
      error: (error) => {
        console.error('删除文件失败:', error);
        this.message.error('删除文件失败');
      }
    });
  }

  /**
   * 预览图片
   */
  previewFile(file: BlogFile): void {
    if ((file as any).url) {
      this.previewImage = (file as any).url;
      this.previewTitle = this.getFileName(file.key);
      this.previewVisible = true;
    } else {
      // 如果没有URL，先获取签名URL
      this.fileService.getSignedUrl(file.key).subscribe({
        next: (response) => {
          if (response.status && response.data) {
            this.previewImage = response.data.url;
            this.previewTitle = this.getFileName(file.key);
            this.previewVisible = true;
          }
        },
        error: (error) => {
          console.error('获取文件URL失败:', error);
          this.message.error('获取文件预览失败');
        }
      });
    }
  }

  /**
   * 从文件key中提取文件名
   */
  getFileName(key: string): string {
    return key.split('/').pop() || key;
  }

  /**
   * 获取文件显示名称（供模板使用）
   */
  getFileDisplayName(file: BlogFile): string {
    return this.getFileName(file.key);
  }

  /**
   * 关闭预览
   */
  closePreview(): void {
    this.previewVisible = false;
    this.previewImage = '';
    this.previewTitle = '';
  }

  /**
   * 复制文件ID
   */
  copyFileId(fileId: string): void {
    navigator.clipboard.writeText(fileId).then(() => {
      this.message.success('文件ID已复制到剪贴板');
    }).catch(() => {
      this.message.error('复制失败，请手动复制');
    });
  }

  /**
   * 格式化文件大小
   */
  formatFileSize(bytes: number): string {
    if (bytes === 0) return '0 Bytes';
    const k = 1024;
    const sizes = ['Bytes', 'KB', 'MB', 'GB'];
    const i = Math.floor(Math.log(bytes) / Math.log(k));
    return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i];
  }

  /**
   * 格式化日期
   */
  formatDate(dateString: string): string {
    return new Date(dateString).toLocaleDateString('zh-CN', {
      year: 'numeric',
      month: '2-digit',
      day: '2-digit',
      hour: '2-digit',
      minute: '2-digit'
    });
  }

  /**
   * 判断是否为图片类型
   */
  isImageFile(mimetype: string): boolean {
    return mimetype.startsWith('image/');
  }

  /**
   * 获取文件类型图标
   */
  getFileIcon(mimetype: string): string {
    if (mimetype.startsWith('image/')) {
      return 'file-image';
    } else if (mimetype.startsWith('video/')) {
      return 'video-camera';
    } else if (mimetype.startsWith('audio/')) {
      return 'audio';
    } else if (mimetype.includes('pdf')) {
      return 'file-pdf';
    } else if (mimetype.includes('word') || mimetype.includes('document')) {
      return 'file-word';
    } else if (mimetype.includes('excel') || mimetype.includes('spreadsheet')) {
      return 'file-excel';
    } else if (mimetype.includes('powerpoint') || mimetype.includes('presentation')) {
      return 'file-ppt';
    } else {
      return 'file';
    }
  }
}
